<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <link href="$!{__beat.server.contextPath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link href="$!{__beat.server.contextPath}/bootstrap/datepicker/datepicker3.css" rel="stylesheet">
    <link rel="stylesheet" href="$!{__beat.server.contextPath}/bootstrap/css/App.css" type="text/css" />
    <link rel="stylesheet" href="$!{__beat.server.contextPath}/bootstrap/css/font-awesome.min.css" type="text/css" />
    <link rel="stylesheet" type="text/css" href="$!{__beat.server.contextPath}/css/wnl.css">
    <meta charset="UTF-8">
    <title>KPI-分业务增长</title>
    <style type="text/css">
    .table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
        padding: 4px 2px;
        font-size:10px;
        vertical-align: middle;      
    }
</style>
</head>
<body>

<div class="container-fluid">
            <div class="row" align="center">
                <div id="condition" timeType="month">
                    <form class="form-inline">      
                        <div class="btn-group btn-group-sm btn-tab" role="group" aria-label="Basic example" >
                            <button type="button" class="btn btn-default btnPlat" dateGrp='week'>周</button>
                            <button type="button" class="btn btn-default active btnPlat" dateGrp='month'>月</button>
                        </div>
                            <div  class="input-group input-group-sm" >
                            <input id="time_input" type="text" class="form-control time" placeholder="时间选择" >
                        </div>      
                    </form>
                </div>
                
                    <table id="business" class="table table-striped table-bordered table-hover text-center">
                    <thead >
                        <tr role="row" >
                        <th class="text-center">业务线</th>
                        <th class="text-center">消费</th>
                        <th class="text-center">现金</th>
                        <th class="text-center danger">精准消费</th>
                        <th class="text-center danger">精准现金</th>
                        <th class="text-center danger">精准客户数</th>
                        <th class="text-center danger">精准ARPU</th>
                        <th class="text-center warning">置顶消费</th>
                        <th class="text-center warning">置顶现金</th>
                        <th class="text-center warning">置顶客户数</th>
                        <th class="text-center warning">置顶ARPU</th>
                        <th class="text-center info">智能消费</th>
                        <th class="text-center info">智能现金</th>
                        <th class="text-center info">智能客户数</th>
                        <th class="text-center info">智能ARPU</th>
                        </tr>
                    </thead>
                    <tbody role="alert" aria-live="polite" aria-relevant="all"></tbody>
                    </table>
                    <table id="huanbi" class="table table-striped table-bordered table-hover text-center">
                    <thead>
                        <tr role="row"> 
                        <th class="text-center">环比</th>
                        <th class="text-center">消费</th>
                        <th class="text-center">现金</th>
                        <th class="text-center danger">精准消费</th>
                        <th class="text-center danger">精准现金</th>
                        <th class="text-center danger">精准客户数</th>
                        <th class="text-center danger">精准ARPU</th>
                        <th class="text-center warning">置顶消费</th>
                        <th class="text-center warning">置顶现金</th>
                        <th class="text-center warning">置顶客户数</th>
                        <th class="text-center warning">置顶ARPU</th>
                        <th class="text-center info">智能消费</th>
                        <th class="text-center info">智能现金</th>
                        <th class="text-center info">智能客户数</th>
                        <th class="text-center info">智能ARPU</th>
                        </tr>
                    </thead>
                    <tbody role="alert" aria-live="polite" aria-relevant="all"></tbody>
                    </table>
                                        <table id="tongbi" class="table table-striped table-bordered table-hover text-center">
                    <thead>
                        <tr role="row">
                        <th class="text-center">同比</th>
                        <th class="text-center">消费</th>
                        <th class="text-center">现金</th>
                        <th class="text-center danger">精准消费</th>
                        <th class="text-center danger">精准现金</th>
                        <th class="text-center danger">精准客户数</th>
                        <th class="text-center danger">精准ARPU</th>
                        <th class="text-center warning">置顶消费</th>
                        <th class="text-center warning">置顶现金</th>
                        <th class="text-center warning">置顶客户数</th>
                        <th class="text-center warning">置顶ARPU</th>
                        <th class="text-center info">智能消费</th>
                        <th class="text-center info">智能现金</th>
                        <th class="text-center info">智能客户数</th>
                        <th class="text-center info">智能ARPU</th>
                        </tr>
                    </thead>
                    <tbody role="alert" aria-live="polite" aria-relevant="all"></tbody>
                    </table>
            </div>
        </div>
</div>
    
</body>
<script src="$!{__beat.server.contextPath}/bootstrap/jquery.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/js/libs/bootstrap.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/js/App.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/datepicker/bootstrap-datepicker.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/datepicker/nongLiDate.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script type="text/javascript">

    var datepicker_op={
        format: "yyyy-mm-dd",
        clearBtn: false,
        language: "zh-CN",
        autoclose: true,
        todayHighlight: true,
        minViewMode:0,
        orientation: "top left"
    };

    function setDatePicker(){
        var input=$('#time_input');
        $(input).val('');
        var type=$('#condition').attr('timeType');
        if('week'==type){
            datepicker_op.minViewMode=0;
            datepicker_op.format='yyyy-mm-dd';
        }else if('month'==type){
            datepicker_op.minViewMode=1;
            datepicker_op.format='yyyymm';
        }
        input.datepicker('remove');
        input.datepicker(datepicker_op);
    }

    $('.btn-tab button').click(function(e){
        $(this).addClass('active');
        $(this).siblings('button').each(function(){
            $(this).removeClass('active');
        });
        $('#condition').attr('timeType',$(this).attr('dateGrp'));
        setDatePicker($('#condition').attr('timeType'));
    });

    $('#time_input').datepicker().on('changeDate',function(e){
        setData($('#condition').attr('timeType'),e.format());
    });

    function setData(type,time){
        $.ajax({
            url: '/dashboard/income/ajax/getKpiBusinessup',
            type: 'post',
            async: true,
            data:{"type":type,"time":time},
            dataType: 'json',
            success: function(data, textStatus) {
                console.log(data);
                var sort= sortByName(data);
                $('#business tbody').text("");
                $('#huanbi tbody').text("");
                $('#tongbi tbody').text("");
                if(!data)return;
                    $.each(sort,function(index,value){
                    $('#business tbody').append("<tr></tr>");
                    $('#business tbody tr:last').append(addInfo(value.all.businessTypeName));
                     $('#business tbody tr:last').append(addInfo(value.all.cost));
                     $('#business tbody tr:last').append(addInfo(value.all.cash));
                     $('#business tbody tr:last').append(addInfo(value.jingzhun.cost,'danger'));
                     $('#business tbody tr:last').append(addInfo(value.jingzhun.cash,'danger'));
                     $('#business tbody tr:last').append(addInfo(value.jingzhun.user_num,'danger'));
                     $('#business tbody tr:last').append(addInfo(value.jingzhun.arpu,'danger'));
                     $('#business tbody tr:last').append(addInfo(value.zhiding.cost,'warning'));
                     $('#business tbody tr:last').append(addInfo(value.zhiding.cash,'warning'));
                     $('#business tbody tr:last').append(addInfo(value.zhiding.user_num,'warning'));
                     $('#business tbody tr:last').append(addInfo(value.zhiding.arpu,'warning'));
                     $('#business tbody tr:last').append(addInfo(value.zhineng.cost,'info'));
                     $('#business tbody tr:last').append(addInfo(value.zhineng.cash,'info'));
                     $('#business tbody tr:last').append(addInfo(value.zhineng.user_num,'info'));
                     $('#business tbody tr:last').append(addInfo(value.zhineng.arpu,'info'));
                     ////////////                    
                    $('#tongbi tbody').append("<tr></tr>");
                    $('#tongbi tbody tr:last').append(addInfo(value.all.businessTypeName));
                     $('#tongbi tbody tr:last').append(addInfo(value.all.cost_YOY));
                     $('#tongbi tbody tr:last').append(addInfo(value.all.cash_YOY));
                     $('#tongbi tbody tr:last').append(addInfo(value.jingzhun.cost_YOY,'danger'));
                     $('#tongbi tbody tr:last').append(addInfo(value.jingzhun.cash_YOY,'danger'));
                     $('#tongbi tbody tr:last').append(addInfo(value.jingzhun.user_num_YOY,'danger'));
                     $('#tongbi tbody tr:last').append(addInfo(value.jingzhun.arpu_YOY,'danger'));
                     $('#tongbi tbody tr:last').append(addInfo(value.zhiding.cost_YOY,'warning'));
                     $('#tongbi tbody tr:last').append(addInfo(value.zhiding.cash_YOY,'warning'));
                     $('#tongbi tbody tr:last').append(addInfo(value.zhiding.user_num_YOY,'warning'));
                     $('#tongbi tbody tr:last').append(addInfo(value.zhiding.arpu_YOY,'warning'));
                     $('#tongbi tbody tr:last').append(addInfo(value.zhineng.cost_YOY,'info'));
                     $('#tongbi tbody tr:last').append(addInfo(value.zhineng.cash_YOY,'info'));
                     $('#tongbi tbody tr:last').append(addInfo(value.zhineng.user_num_YOY,'info'));
                     $('#tongbi tbody tr:last').append(addInfo(value.zhineng.arpu_YOY,'info'));   
                     ///////////////////////////
                    $('#huanbi tbody').append("<tr></tr>");
                    $('#huanbi tbody tr:last').append(addInfo(value.all.businessTypeName));
                     $('#huanbi tbody tr:last').append(addInfo(value.all.cost_chain));
                     $('#huanbi tbody tr:last').append(addInfo(value.all.cash_chain));
                     $('#huanbi tbody tr:last').append(addInfo(value.jingzhun.cost_chain,'danger'));
                     $('#huanbi tbody tr:last').append(addInfo(value.jingzhun.cash_chain,'danger'));
                     $('#huanbi tbody tr:last').append(addInfo(value.jingzhun.user_num_chain,'danger'));
                     $('#huanbi tbody tr:last').append(addInfo(value.jingzhun.arpu_chain,'danger'));
                     $('#huanbi tbody tr:last').append(addInfo(value.zhiding.cost_chain,'warning'));
                     $('#huanbi tbody tr:last').append(addInfo(value.zhiding.cash_chain,'warning'));
                     $('#huanbi tbody tr:last').append(addInfo(value.zhiding.user_num_chain,'warning'));
                     $('#huanbi tbody tr:last').append(addInfo(value.zhiding.arpu_chain,'warning'));
                     $('#huanbi tbody tr:last').append(addInfo(value.zhineng.cost_chain,'info'));
                     $('#huanbi tbody tr:last').append(addInfo(value.zhineng.cash_chain,'info'));
                     $('#huanbi tbody tr:last').append(addInfo(value.zhineng.user_num_chain,'info'));
                     $('#huanbi tbody tr:last').append(addInfo(value.zhineng.arpu_chain,'info'));   
                    });
            },
            error : function() {
            }
        });
    };

        var cate=['all','huangye','zhaopin','fangchan','ershouchuangxin','ershoutuiguang','ershouche'];
        function sortByName(data){
    if(!data)return [];
    var resut=[];
    $.each(cate,function(index,value){
        resut.push(data[value]);
    });
    return resut;
}

function addInfo(value,class1){
    var td= $('<td></td>');
    if(class1){
        td.addClass(class1);
    };
    //数字
    if(!isNaN(value)){
        var ss=value+"%";
        if(ss.indexOf('.')!=-1){
            if (value==0) {
                return td.html(ss);
            };
            if(value>0){
                td.addClass('text-danger');
                td.html(ss);
                td.append('<i class="upi"></i>');
            }else{
                td.addClass('text-success');
                td.html(ss);
                td.append('<i class="downi"></i>');
            }
            return td;
        }else{
             return td.html(addCommas(value));
        }
    }
    return td.html(value);
}

        function addCommas(x) {
        if (isNaN(x)) {
            return '-';
        }
        x = (x + '').split('.');
        return x[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,') + (x.length > 1 ? '.' + x[1] : '');
    }

    setDatePicker();
    setData(null,null);

</script>
</html>